<template>
  <el-dialog
    class="dialog"
    title="查看"
    :visible.sync="dialogFormVisible"
    v-if="dialogFormVisible"
    width="1200px"
    @close="close"
    :close-on-click-modal="false"
    v-dialogDrag
  >
    <div>
      <!-- 销售订单 -->
      <sales-order-history v-if="form.category == 'sal_order'" :dataInfo="form"></sales-order-history>
    </div>

    <el-card class="box-card">
      <el-form ref="form" :model="form" :rules="formRules" label-width="80px" label-position="left">
        <el-form-item label="审批意见" prop="comment">
          <el-input v-model.trim="form.comment" maxlength="50" placeholder="同意" show-word-limit></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-checkbox v-model="form.isSend" @change="changeIsSend">是否抄送</el-checkbox>
        </el-form-item>
        <el-form-item label="抄送给" prop="sendUsers" v-if="form.isSend">
          <el-input v-model.trim="form.sendUsers" placeholder>
            <template slot="append"><el-button icon="el-icon-search" @click="openSendUser"></el-button></template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="form.isAppoint" @change="changeIsAppoint">指定下一步处理者(不设置就使用默认处理者)</el-checkbox>
        </el-form-item>
        <el-form-item label="指定给" prop="appointUsers" v-if="form.isAppoint">
          <el-input v-model.trim="form.appointUsers">
            <template slot="append"><el-button icon="el-icon-search" @click="openAppointUser"></el-button></template>
          </el-input>
        </el-form-item> -->
      </el-form>
    </el-card>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">关 闭</el-button>
      <el-button type="primary" @click="handleApprove">通 过</el-button>
      <el-button type="primary" @click="handleRejectToParent">
        <vab-icon :icon="['fas', 'arrow-left']"></vab-icon>
        驳 回
      </el-button>
      <el-button type="primary" @click="handleRejectToFirst">
        <vab-icon :icon="['fas', 'angle-double-left']"></vab-icon>
        回退首环节
      </el-button>
      <el-button type="primary" @click="handleRejectToAssignNode">
        <vab-icon :icon="['fas', 'circle-notch']"></vab-icon>
        回退任意环节
      </el-button>
    </div>

    <assign-node ref="assignNode" @fetch-data="reloadData"></assign-node>
  </el-dialog>
</template>

<script>
  import { doCompleteTask, doRejectTaskToFirst, doRejectTaskToParent, doRejectTaskToAny } from '@/api/workflow/task'
  import AssignNode from './AssignNode'
  import SalesOrderHistory from '@/views/sales/order/components/history/History'

  export default {
    name: 'SalesOrderFlowHistory',
    components: { AssignNode, SalesOrderHistory },
    data() {
      return {
        dialogFormVisible: false,
        elementLoadingText: '正在加载...',
        activeName: 'info',
        title: '',
        form: {
          comment: '',
          isSend: false,
          sendUsers: undefined,
          isAppoint: false,
          appointUsers: undefined,
        },
        formRules: {
          comment: [{ required: false, trigger: ['blur', 'change'], message: '审批意见不能为空' }],
          sendUsers: [{ required: true, trigger: ['blur', 'change'], message: '用户不能为空' }],
          appointUsers: [{ required: true, trigger: ['blur', 'change'], message: '用户不能为空' }],
        },
        flowNodes: [],
      }
    },
    created() {},
    methods: {
      reloadData() {
        this.close()
        this.$emit('fetch-data')
      },
      changeIsSend(val) {
        if (!val) {
          this.form.sendUsers = undefined
        }
      },
      changeIsAppoint(val) {
        if (!val) {
          this.form.appointUsers = undefined
        }
      },
      openSendUser() {
        console.log('选择抄送人')
      },
      openAppointUser() {
        console.log('选择指定人')
      },
      showEdit(row) {
        this.title = row.businessKey
        this.form = Object.assign({}, row)
        this.dialogFormVisible = true
      },
      close() {
        this.dialogFormVisible = false
      },
      handleRejectToAssignNode() {
        this.$refs['assignNode'].showEdit(this.form)
      },
      handleRejectToFirst() {
        let data = {
          category: this.form.category,
          businessKey: this.form.businessKey,
          taskId: this.form.id,
          comment: this.form.comment,
          targetNodeId: 'null',
        }
        this.$baseConfirm('确定要回退首环节吗？', null, async () => {
          await doRejectTaskToFirst(data).then((res) => this.callbackFun(res))
        })
      },
      handleRejectToParent() {
        let data = {
          category: this.form.category,
          businessKey: this.form.businessKey,
          taskId: this.form.id,
          comment: this.form.comment,
          targetNodeId: 'null',
        }
        this.$baseConfirm('确定要驳回上一环节吗？', null, async () => {
          await doRejectTaskToParent(data).then((res) => this.callbackFun(res))
        })
      },
      handleApprove() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            let data = {
              category: this.form.category,
              businessKey: this.form.businessKey,
              taskId: this.form.id,
              comment: this.form.comment,
              targetNodeId: 'null',
            }
            this.$baseConfirm('请确定是否通过？', null, async () => {
              await doCompleteTask(data).then((res) => this.callbackFun(res))
            })
          }
        })
      },
      callbackFun(res) {
        if (res.success) {
          this.$baseMessage(res.msg, 'success')
          this.$emit('fetch-data')
          this.close()
        } else {
          this.$baseMessage(res.msg, 'error')
        }
      },
    },
  }
</script>

<style scoped>
  .dialog /deep/ .el-dialog__body {
    padding-top: 0 !important;
  }
  .dialog .box-card {
    margin-top: 16px;
  }
</style>
